<template>
   <div>
     <!-- 面包屑导航 -->
     <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
     </el-breadcrumb>
     <!-- 卡片视图 -->
     <el-card>
       <el-row :gutter="20">
         <el-col :span="16">
            <el-input placeholder="请输入内容">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
         </el-col>
         <el-col :span="4">
            <el-button @click="addbox=true " type="primary">添加用户</el-button>
         </el-col>
       </el-row>
       <!-- 表格 -->
       <el-table :data="userlist" border stripe>
         <el-table-column type="index" label="#">
         </el-table-column>
         <el-table-column prop="username" label="姓名">
         </el-table-column>
         <el-table-column prop="email" label="邮箱">
         </el-table-column>
         <el-table-column prop="mobile" label="电话">
         </el-table-column>
         <el-table-column prop="role_name" label="角色">
         </el-table-column>
         <el-table-column label="状态">
            <template slot-scope="scope">
               <el-switch v-model="scope.row.mg_state"></el-switch>
            </template>
         </el-table-column>
         <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button @click="showEdit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete"></el-button>
              <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
                  <el-button @click="showRole(scope.row)" size="mini" type="warning" icon="el-icon-setting"></el-button>  
              </el-tooltip>
            </template>
         </el-table-column>
       </el-table>
       <!-- 分页栏  -->
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="queryInfo.pagenum"
         :page-sizes="[2, 5, 10, 50]"
         :page-size="queryInfo.pagesize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </el-card>

     <!-- 新增用户框  -->
     <el-dialog title="新增用户" :visible.sync="addbox">
      <el-form ref="addform" :model="addForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="addForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
          </el-form-item> 
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="addbox=false">取 消</el-button>
         <el-button @click="adduser" type="primary">确 定</el-button>
      </div>
      </el-dialog>
      <!-- 修改用户框  -->
     <el-dialog title="修改用户" :visible.sync="editbox">
      <el-form :model="editForm">
         <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="editForm.mobile"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="updateUser" type="primary">确 定</el-button>
      </div>
      </el-dialog>

     <!-- 角色分配框  -->
     <el-dialog title="分配角色" :visible.sync="rolebox">
        <p>当前的用户：{{userInfo.username}}</p>
        <p>当前的角色：{{userInfo.role_name}}</p>
        <el-select v-model="selRoleId" placeholder="请选择">
            <el-option
               v-for="item in roleList"
               :key="item.id"
               :label="item.roleName"
               :value="item.id">
            </el-option>
         </el-select>
      <div slot="footer" class="dialog-footer">
         <el-button @click="rolebox=false">取 消</el-button>
         <el-button @click="saveRoleInfo" type="primary">确 定</el-button>
      </div>
      </el-dialog>
   </div>
</template>

<script>
export default {
   data(){
      return {
         selRoleId: '',  //角色ID
         userInfo: { },   //分配角色的用户信息
         userlist: [ ],  //用户列表
         roleList: [ ] , //所有角色
         total: 0 ,
         queryInfo : {
            query: '',
            pagenum: 1,
            pagesize: 5
         },
         addbox: false ,  //显示新增框
         editbox: false,  //显示修改框
         rolebox: false,  //显示角色框
         //表单数据对象
         addForm:{
            username: '',
            password: '',
            email: '',
            mobile: ''
         },
         //修改用户的对象
         editForm: {
            id: '',
            email: '',
            mobile: ''
         } 
      }
   },
   created(){
      this.getUserList();  //ajax 获取用户数据
   },
   methods:{
      async getUserList(){
        let ret=await  this.$http.get('/users', {params: this.queryInfo})
        console.log('用户', ret );
        if(ret.meta.status != 200){
          return this.$message.error(ret.meta.msg )
         }
         //保存数据
         this.userlist =  ret.data.users
         this.total = ret.data.total
      },
      handleSizeChange(size){
         console.log('变化每页条数',size);
         this.queryInfo.pagesize = size 
         this.getUserList();  //刷新
      },
      handleCurrentChange(p){
         console.log('变化页码',p);
         this.queryInfo.pagenum = p 
         this.getUserList();  //刷新
      },
      //新增用户
      async adduser(){
         let ret = await this.$http.post("users",this.addForm);
         console.log( ret );
         if(ret.meta.status != 201){
            return this.$message.error(ret.meta.msg )
         }
         this.$message.success(ret.meta.msg)
         this.addbox = false
         this.getUserList();  //刷新
      },
      showEdit(row){
         console.log("修改", row );
         this.editForm.id = row.id 
         this.editForm.email = row.email
         this.editForm.mobile = row.mobile
         this.editbox = true   //显示
      },
      async updateUser(){
        let ret = await this.$http.put(`/users/${this.editForm.id}`,this.editForm)
        if(ret.meta.status != 200){
           return this.$message.error(ret.meta.msg )
        }
        this.$message.success(ret.meta.msg)
        this.editbox = false
        this.getUserList();  //刷新
      },
      async showRole(row){
         this.userInfo = row 
         //查所有角色信息
         let ret = await this.$http.get('/roles')
         console.log( '角色' , ret );
         this.roleList  = ret.data ;
         this.rolebox = true  //显示
      },
      async saveRoleInfo(){
         let uid = this.userInfo.id 
         let rid = this.selRoleId 
         let ret = await this.$http.put(`/users/${uid}/role`,{ rid })
         console.log(ret );
         if(ret.meta.status != 200){
           return this.$message.error(ret.meta.msg )
         }
         this.$message.success(ret.meta.msg)
         this.rolebox = false  //显示
         this.getUserList();  //刷新

      }

   }
}
</script>

<style>

</style>